import { Component } from 'react';
import React from 'react';
import { connect } from 'umi';
import { FormValueType } from '@/pages/ListTableList/components/UpdateForm';
import HighPerformTable from '@/components/HighPerformTable';
import APIS from '@/apis';
import CustomCascader from '@/components/CustomCascader/CustomCascader';
import { Card, Col, Row, Select, Statistic } from 'antd';
import { ArrowUpOutlined, SmileTwoTone, MehTwoTone } from '@ant-design/icons';

class TrainingStat extends Component<any, any> {
  actionRef: any;
  requestGetData(
    params: {
      pageSize?: number;
      current?: number;
    },
    sorter: {
      [key: string]: 'ascend' | 'descend';
    },
    filter: {
      [key: string]: React.ReactText[];
    },
  ) {
    return APIS.UserAPI.GetPermissionList({ ...params, sorter, filter });
  }
  handleUpdateModalVisible(value: boolean) { }
  handleUpdate(value: FormValueType) {
    return false;
  }
  clomns: any = [
    {
      title: '试卷标题',
      dataIndex: 'title',
      rules: [
        {
          required: true,
          message: '试卷名称为必填项',
        },
      ],
    },
    {
      title: '试卷分类',
      dataIndex: 'desc',
      valueType: 'textarea',
    },
    {
      title: '所属课程',
      dataIndex: 'course',
    },
    {
      title: '更新时间',
      dataIndex: 'status',
      hideInForm: true,
    },
  ];
  render() {
    return (
      <div>
        <Row gutter={16}>
          <Col span={8}>
            <Card>
              <Statistic
                title="实验人数"
                value={1500}
                // precision={2}
                valueStyle={{ color: '#3f8600' }}
                prefix={<ArrowUpOutlined />}
                suffix="人"
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic
                title="优秀人数"
                value={500}
                // precision={2}
                valueStyle={{ color: '#cf1322' }}
                prefix={<SmileTwoTone />}
                suffix="人"
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic
                title="及格人数"
                value={1000}
                // precision={2}
                valueStyle={{ color: '#cf1322' }}
                prefix={<MehTwoTone />}
                suffix="人"
              />
            </Card>
          </Col>
        </Row>
        <CustomCascader datasource={[{
          placeholder: "请选择课程",
          dataGet: (values) => APIS.OrgsAPI.SearchGetSchoolList({ current: 1, pageSize: 100 }), renderOption: (data) => {
            return <Select.Option key={data.id} value={data.id}>{data.name}</Select.Option>
          }
        }]}></CustomCascader>
        <HighPerformTable<any>
          columns={this.clomns}
          requestGetData={this.requestGetData.bind(this)}
          ref={(ref) => (this.actionRef = ref)}
          hideOptions
        />
      </div>
    );
  }
}

export default connect()(TrainingStat);
